import React from 'react';
import './index.less';
import api from '../../../axios'
import { Row, Table, Modal, DatePicker, Divider  } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;


class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: {
                "count1": {
                    "gas": "12",
                    "diesel": 12,
                    "gas_tb": -0.94,
                    "diesel_tb": -0.94
                },
                "count2": {
                    "gas": "11",
                    "diesel": 341,
                    "diesel_sales": 14,
                    "gas_sales": 12,
                    "gas_tb": -0.945,
                    "diesel_tb": 0.705
                },
                "count3": {
                    "gas": "1",
                    "diesel": 1,
                    "diesel_sales": 4,
                    "gas_sales": 4,
                    "gas_tb": -0.995,
                    "diesel_tb": -0.995
                },
                "count4": {
                    "gas": "1",
                    "diesel": 2,
                    "gas_tb": -0.995,
                    "diesel_tb": -0.99
                }
            },
            visible: false,
            year: '',
            month: '',

        };
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };

    async componentDidMount(){
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1

      let res = await api.ajax({
          method: 'get',
          url: `/data/count?year=${year}&month=${month}`,
      });

      this.setState({
          data: res.data
      })
    }

    
    
    render() {

      function onChange(date, dateString) {
        console.log(date, dateString);
        
        let year = dateString.slice(0, 4)
        let month = dateString.slice(5, 7)
        getData(year, month)

      }

      const getData = async (yaar, month) => {
        let res = await api.ajax({
            method: 'get',
            url: `/data/count?year=${yaar || 2023}&month=${month || 2}`,
            // data: {
            //     page: 1
            // }
        });

        this.setState({
            data: res.data
        })
        console.log(res.data);
      }


        return (
           <>
             <div className='header_title'>
               <MonthPicker onChange={onChange} placeholder="选择月份"/>
             </div>
             <div className='wapper'>
                <div>
                  <div>
                    <p>进购</p>
                    <div>汽油: {this.state.data.count1.gas}吨</div>
                    <div>汽油同比: {this.state.data.count1.gas_tb}%</div>
                    <Divider  dashed={true}/>
                    <div>柴油: {this.state.data.count1.diesel}吨</div>
                    <div>柴油同比: {this.state.data.count1.diesel_tb}%</div>
                  </div>
                </div>
                <div>
                  <div>
                    <p>零售</p>
                    <div>汽油: {this.state.data.count2.gas}吨</div>
                    <div>汽油同比: {this.state.data.count2.gas_tb}%</div>
                    <div>柴油: {this.state.data.count2.diesel}吨</div>
                    <Divider  dashed={true}/>
                    <div>柴油同比: {this.state.data.count2.diesel_tb}%</div>
                    <div>柴油销售额: {this.state.data.count2.gas_sales}万</div>
                    <div>汽油销售额: {this.state.data.count2.diesel_sales}万</div>
                  </div>
                </div>
                <div>
                  <div>
                    <p>批发</p>
                    <div>汽油: {this.state.data.count3.gas}吨</div>
                    <div>汽油同比: {this.state.data.count3.gas_tb}%</div>
                    <div>柴油: {this.state.data.count3.diesel}吨</div>
                    <Divider  dashed={true}/>
                    <div>柴油同比: {this.state.data.count3.diesel_tb}%</div>
                    <div>柴油销售额: {this.state.data.count3.gas_sales}万</div>
                    <div>汽油销售额: {this.state.data.count3.diesel_sales}万</div>
                  </div>
                </div>
                <div>
                  <div>
                    <p>库存</p>
                    <div>汽油: {this.state.data.count4.gas}吨</div>
                    <div>汽油同比: {this.state.data.count4.gas_tb}%</div>
                    <Divider  dashed={true}/>
                    <div>柴油: {this.state.data.count4.diesel}吨</div>
                    <div>柴油同比: {this.state.data.count4.diesel_tb}%</div>
                  </div>
                </div>
             </div>
           </>
        );
    }
}

export default index;